import React, { Component } from 'react'

export default class Mycls2 extends Component {
    state = {
        userinfo: {
            name: '贾宝玉',
            age: 18
        },
        nameArr: [
            { id: 1, name: '舒克-开飞机' },
            { id: 2, name: '贝塔-开坦克' }
        ]
    }
    addAge = () => {
        // this.setState({
        //     userinfo: {
        //         name: this.state.userinfo.name,
        //         age: this.state.userinfo.age + 1
        //     }
        // })
        this.setState({
            userinfo: {
                ...this.state.userinfo,
                age: this.state.userinfo.age + 1
            }
        })
    }
    render() {
        const { name, age } = this.state.userinfo
        const { nameArr } = this.state
        return (
            <div>
                <p>{name}</p>
                <p onClick={this.addAge}>{age}</p>
                {/* 遍历数组 */}
                <p><button onClick={() => {
                    nameArr.push({
                        id: 3,
                        name: '海尔兄弟'
                    })
                    this.setState({
                        nameArr: nameArr
                    })

                }}>添加小英雄</button></p>
                <ol>
                    {
                        nameArr.map((item, indes) => <li key={item.id}>{item.name}</li>)
                    }
                </ol>
            </div>
        )
    }
}
